#include ("/_includes/_layout.html")
#define css()
<style type="text/css">
.page-showcase-attachment {
    position: relative;
}
.page-showcase-attachment::after {
    clear: both;
    content: "";
    display: table;
}
.page-showcase-attachment .media-container {
    margin-right: 150px;
    overflow: hidden;
}
.page-showcase-attachment .category-container {
    background: #f8f8f8 none repeat scroll 0 0;
    box-sizing: border-box;
    float: right;
    min-height: 400px;
    padding: 10px 0;
    width: 200px;
}
.page-showcase-attachment .category-list {
    margin-bottom: 15px;
    max-height: 996px;
    overflow-y: auto;
}
.page-showcase-attachment .category-list li {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    margin-right: 1px;
    padding: 0 31px 0 8px;
    position: relative;
}
.page-showcase-attachment .category-list li:hover {
    background: #fafafa none repeat scroll 0 0;
}
.page-showcase-attachment .category-list li.active {
    background: #fff none repeat scroll 0 0;
}
.page-showcase-attachment .category-list .category-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
}
.page-showcase-attachment .category-list .category-num {
    color: #999;
    position: absolute;
    right: 8px;
    top: 0;
}
.ui-box {
    margin-bottom: 15px;
}

.ui-btn-success {
    background: #4b0 none repeat scroll 0 0;
    border-color: #3da900;
    color: #fff;
}
.ui-btn {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    padding: 0 12px;
    text-align: center;
}

.page-showcase-attachment .media-title {
    height: 28px;
}
.page-showcase-attachment .media-title-wrap h1 {
    display: inline;
    font-size: 16px;
    line-height: 28px;
}
.page-showcase-attachment .media-title-wrap h1, .page-showcase-attachment .media-title-wrap a {
    margin-right: 10px;
}

.page-showcase-attachment .action-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 28px;
    padding: 6px;
}
.page-showcase-attachment .action-bar label {
    display: inline-block;
}
.page-showcase-attachment .action-bar label input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: baseline;
}
.page-showcase-attachment .action-bar .batch-opt {
    margin-left: 20px;
}

.page-showcase-attachment .image-list {
    margin: 0 0 0 -20px;
}
.page-showcase-attachment .image-list::after {
    clear: both;
    content: "";
    display: table;
}
.page-showcase-attachment .image-item {
    float: left;
    margin: 0 0 20px 20px;
    width: 100px;
}
.page-showcase-attachment .image-item .image-box {
    background: #ddd none no-repeat scroll 50% 50% / cover ;
    height: 100px;
    width: 100px;
}
.page-showcase-attachment .image-item .image-title {
    padding: 8px 0 0;
}
.page-showcase-attachment .image-item .image-title label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160px;
}
.page-showcase-attachment .image-item .image-title label input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: baseline;
}
.page-showcase-attachment .image-item .image-opt a {
    margin-right: 8px;
}
.page-showcase-attachment .action-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 28px;
    padding: 6px;
}
</style>
#end
#@layout("", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	#include ("/_includes/menu-second.html")
	<div class="app-content">
		<div class="ibox-content">
				<div class="page-showcase-attachment" id="mainTable">
				   <div class="media-container">
				     <div class="media-title ui-box">
						<a id="uploadImage" class="btn btn-success pull-right" href="javascript:void(0);">上传视频</a>
					</div>
					<div class="action-bar clearfix">
						<label class="inline"><input type="checkbox" id="all" title="全选/反选">全选</label>
				    </div>
				    <div class="image-list">
				   </div>
				   <div class="clearfix"><div id="pager" class="jqpager" style="margin-bottom: 1px;float: right;"></div></div>
				   </div>
				</div>
		</div>
	</div>
</div>
#end
<script type="text/javascript">
var addGroupDialog;
var editGroupDialog;
var params = {};
var table = new obz.TableView("pager", obz.ctx + "/attachment/getVedioList", params, function(resp){
	$(".image-list").empty();
	if(resp && resp.list && resp.list.length>0){
		var dataList = resp.list;
		if(dataList.length>0){
			for(var i=0;i<dataList.length;i++){
				var _row = dataList[i];
				var trHtml = obz.dataTemplate4obj($("#image_item_tpl").html(), _row);
				$(".image-list").append(trHtml);
			}
		}
	}
});
table.init();

$("ul.category-list li").click(function() {
	$("ul.category-list li").each(function(){	
		 $(this).removeClass("active");
	}); 
	$(this).addClass("active");
	$("#rename").show();
	var rename = document.getElementById('rename') ;
	rename.setAttribute("data-id",$(this).attr("data-id"));
	$("h1").html($(this).attr("data-name"));
	params.id = $("ul.category-list li.active").attr("data-id");
	table.init();
}); 
$("#uploadImage").click(function() {
 	var params={};
 	params.groupId = $("ul.category-list li.active").attr("data-id");
 	obz.uploadVedio(params,function (){
		location.href=obz.ctx+"/attachment/vedio"; 
 	});
});
$("#all").click(function(){
	if(this.checked){   
		$("input[name='commchk']").prop("checked",true);
	}else{
		$("input[name='commchk']").prop("checked",false);
	}   
});
function del(obj){
	var ids=$(obj).attr("id");
	obz.showMessage("确定删除该视频吗？", function(){
		obz.ajaxJson(obz.ctx + "/attachment/del", {ids: ids}, function(resp){
			if(resp.code==200){
				table.init();
			}
		});
	});
	return false;
}
</script>
<script type="text/template" id="image_item_tpl">
<div class="image-item">
	<video class="image-box" src="{imgPath}" controls="controls"></video>
	<div class="image-title"><label><input type="checkbox" value="{id}" name="commchk" id="checkbox_{id}">{title}</label></div>
	<div class="image-opt"><a href="javascript:;" id="{id}" onclick="del(this)">删除</a></div>
</div>
</script>